<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> 表格
				</el-breadcrumb-item>
				<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<el-table :data="tableData" style="width: 80%" class="tb">
			<el-table-column prop="userId" label="id">
			</el-table-column>
			<el-table-column prop="userName" label="用户名">
			</el-table-column>
			<el-table-column prop="userPhone" label="用户电话">
			</el-table-column>
			<el-table-column prop="userStatusId" label="用户状态">
				<template slot-scope="scope">
					<a href="javascript:void(0)" @click="apdateCz(scope)">{{scope.row.userStatusId == '1'?'禁用(点击启用) ':'启用(点击禁用)'}} </a>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button type="success" @click="deleteByUserId(scope)">删除</el-button>
					<el-button type="info" onclick="document.getElementById('mymodel').style.display='block'" @click="apdateg(scope)">修改信息</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @current-change="curChange" background layout="prev, pager, next" :total="total" :page-size="serchs.pageSize">
		</el-pagination>

		<!--修改model-->
		<div class="modal" id="mymodel">
			<span onclick="document.getElementById('mymodel').style.display='none'" class="close">×</span>
			<form class="modal-content animate" id="dt">
				<div class="container">
					<div>
						<label for="pn">用户名</label><br />
						<input type="text" v-model="apdate.userName">
					</div>
					<div>
						<label for="pn">用户电话</label><br />
						<input type="text" v-model="apdate.userPhone">
					</div>
					<div>

						<label for="pn">用户权限</label><br />
						<el-select v-model="changeRole.roleId" placeholder="请选择">
							<el-option v-for="item in roles" :key="item.roleId" :value="item.roleName"></el-option>
						</el-select>

					</div>
					<div>

						<label for="pn">所在部门</label><br />
						<el-select v-model="changeRole.userOfficeId" placeholder="请选择">
                            <el-option v-for="item in userOfficeIds" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>

					</div>
					<div>
						<el-button type="success" @click="apdateUser()">提交更新</el-button>
					</div>
				</div>
			</form>
		</div>

	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				tableData: [],
				/*分页查询条件*/
				serchs: {
					pageNum: 1,
					pageSize: 8,
					userName: "",
					userPhone: "",
					userAddrId: "",
					userOfficeId: ""
				},
				total: 0,
				/*修改用户状态的对象*/
				apdatez: {
					userId: "",
					userStatusId: ""
				},
				/*修改用户信息的对象*/
				apdate: {
					userId: "",
					userName: "",
					userPhone: ""
				},
				/*用户权限 操作对象*/
				changeRole: {
					userId: "",
					roleId: "",
					userOfficeId:""
				},
				/*获取后端的权限对象集合*/
				roles: [],
				userOfficeIds: [{
			          value: '1',
			          label: '税务部'
			        }, {
			          value: '2',
			          label: '消防部'
			        }, {
			          value: '3',
			          label: '公安部'
			    }],
			};
		},
		methods: {
			/*加载数据方法*/
			loadlecturers() {
				this.$axios.post("/user/queryAllUByPage", this.serchs).then(resp => {
					console.log(resp);
					this.tableData = resp.data.data.list;
					this.serchs.pageNum = resp.data.data.pageNum;
					this.serchs.pageSize = resp.data.data.pageSize;
					this.total = resp.data.data.total;
				});
			},
			/*修改用户状态方法*/
			apdateCz(scope) {
				this.apdatez.userId = scope.row.userId;

				if(scope.row.userStatusId == 0) {
					this.apdatez.userStatusId = 1;
				} else {
					this.apdatez.userStatusId = 0;
				}
				this.$axios.post("/user/updateUserByUserForm", this.apdatez).then(resp => {
					if(resp.data.code == "0000") {
						alert("修改成功");
					}
					this.loadlecturers();
				});
			},
			/*删除用户*/
			deleteByUserId(scope) {
				let userId = scope.row.userId;
				this.$axios.get("/user/deleteUserById", {
					params: {
						userId: userId
					}
				}).then(resp => {
					console.log(resp);
					if(resp.data.code == "0000") {
						alert("删除成功");
					}
					this.loadlecturers();
				});
			},
			/*取出需要修改的用户的 id*/
			apdateg(scope) {
				let userId = scope.row.userId;
				this.$axios.get("/user/findRolesByUserId", {
					params: {
						userId: userId
					}
				}).then(resp => {
					console.log(resp);
					this.changeRole.roleId = resp.data.data;
				});
				this.apdate.userName = scope.row.userName;
				this.apdate.userPhone = scope.row.userPhone;
				this.apdate.userId = scope.row.userId;
				this.changeRole.userId = scope.row.userId;
			},
			/*修改用户信息*/
			apdateUser() {
				for(let i = 0; i < this.roles.length; i++) {
					if(this.roles[i].roleName == this.changeRole.roleId) {
						this.changeRole.roleId = this.roles[i].roleId;
					}
				}
				console.log(this.apdate);
				console.log(this.changeRole);

				/*1.修改用户的基本信息*/
				this.$axios.post("/user/updateUserByUserForm", this.apdate).then(resp => {
					if(resp.data.code == "0000") {
						alert("更新成功");
					}
					console.log(resp);
				});
				/*2.修改用户的权限*/
				this.$axios.post("/user/changeRole", this.changeRole).then(resp => {
					console.log(resp);
				});

			},
			/*获取所有的角色*/
			getAllRole() {
				this.$axios.post("/user/getAllRole").then(resp => {
					this.roles = resp.data.data;
				});
			},
			curChange(indexPage) {
				this.serchs.pageNum = indexPage;
				this.loadlecturers();
			}

		},
		/*进来就会执行*/
		mounted() {
			this.loadlecturers();
			this.getAllRole();

		}
	};
</script>

<style scoped>
	.tb {
		margin-top: 20px;
		align-content: center;
	}
	
	.modal input[type=text] {
		width: 600px;
		padding: 12px 20px;
		margin: 8px 0;
		display: inline-block;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}
	
	.modal button {
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: 100px;
	}
	
	.cancelbtn {
		padding: 14px 20px;
		background-color: #f44336;
	}
	
	.cancelbtn,
	.signupbtn {
		float: left;
		width: 50%
	}
	
	.container {
		padding: 16px;
	}
	
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.4);
		padding-top: 60px;
	}
	
	.modal-content {
		background-color: #fefefe;
		margin: 5% auto 15% auto;
		border: 1px solid #888;
		width: 633px;
	}
	
	.close {
		position: absolute;
		right: 35px;
		top: 15px;
		color: #000;
		font-size: 40px;
		font-weight: bold;
	}
	
	.close:hover,
	.close:focus {
		color: red;
		cursor: pointer;
	}
	
	a {
		color: black;
	}
</style>